<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="template">

<head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>地址管理</title>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/address.css"/>
    <link rel="stylesheet" href="../css/zoomify.css"/>
    <script type="text/javascript" src="../js/messageSet.js"></script>
    <script type="text/javascript" src="../js/messageJson.js"></script>
    <script type="text/javascript" src="../js/zoomify.min.js"></script>
    <script type="text/javascript" src="../js/cityJson.js"></script>
    <script type="text/javascript" src="../js/address.js"></script>
</head>
<body id="orange">
<div class="container">

    <div class="content">

        <div class="container-right" layout:fragment="content">
            <div class="crumbs">
                <ul>
                    <li><a href="/index/home" th:text="#{StationDetailHtml.home}">首页</a><i class="triangle-icon"></i>
                    </li>
                    <li><a href="/userCenter/userInfo" th:text="#{System.member}">会员管理</a><i class="triangle-icon"></i>
                    </li>
                    <li class="active"><a href="" th:text="#{addressHtml.addresss}">地址管理</a></li>
                </ul>
            </div>
            <div class="detailSub">
                <form id="userCenterForm" action="/address/insertAddress" method="post">
                    <div class="page-main">
                        <div class="item item-title ">
                            <span class="item-label tsl smallHand" data-phase-id="d_p_addNewDeliverAddress" id="J_DeliverTitle"
                                  th:text="#{addressHtml.newAddAddress}" onclick="emptyAddress()">新增收货地址　</span><span
                                class="tsl margin-right" data-phase-id="d_p_addNewDeliverAddressNotice"
                                th:text="#{addressHtml.newAddAddressMsg}">以下内容均为必填项</span>
                        </div>
                        <div hidden="hidden">
                            <input name="addressidOne" id="addressidOne" value=""
                                   hidden="hidden"/>
                            <input name="userId" id="operaidOne" value="" hidden="hidden"/>
                        </div>

                        <div>
                            <div style="width: 350px;text-align: right;margin-bottom: -28px;">
                                <label th:text="#{addressHtml.consigneeName}">收货人姓名</label>
                            </div>
                            <input value="" name="consignee" type="text"
                                   class="btnText margin-right" id="consignee"
                                   style="width:200px;"/>
                        </div>
                        <div style="height: 18px;">
                            <div class="consigneeError form-validates">
                                <i class="error hide"></i>
                                <i class="hint"></i>
                                <span id="consigneeError">长度不超过25个字符</span>
                            </div>
                        </div>
                        <div>
                            <div style="width: 350px;text-align: right;margin-bottom: -28px;">
                                <label th:text="#{addressHtml.telPhone}">手机号码</label>
                            </div>
                            <input value="" name="telPhone" type="text"
                                   class="btnText margin-right" id="consigneePhone"
                                   style="width:200px;"/>
                        </div>
                        <div style="height: 18px;">
                            <div class="consigneePhoneError form-validates">
                                <i class="error hide"></i>
                                <i class="hint"></i>
                                <span id="consigneePhoneError">请填写正确的手机号码</span>
                            </div>
                        </div>
                        <div>
                            <div style="width: 350px;text-align: right;margin-bottom: -28px;">
                                <label th:text="#{addressHtml.district}">所在地区 </label>
                            </div>
                            <!--<input value="" name="" type="text" class="btnText" style="width:200px;"/>-->
                            <div class="margin-right btnText smallHand"
                                 style="position: relative;margin-left: 355px;border: 1px solid #a7baf5;height: 30px; width:300px;">
                                <div onclick="selectDistrict()" name="district" id="city-title"
                                     style="margin:3px;border: 0px solid #a7baf5;height: 22px; width:280px;">
                                    <span id="city-titletwo" class="city-title"></span><span
                                        id="downArrow"></span>
                                </div>
                                <input type="hidden" name="province" class="J_iProvince" value=""/>
                                <input type="hidden" name="city" class="J_iCity" value=""/>
                                <input type="hidden" name="area" class="J_iArea" value=""/>
                                <div id="district" class="hide"
                                     style="position: absolute;z-index: 2 ;left: -1px;border: 1px solid #a7baf5;height: auto; width:300px;">
                                    <span id="newprovinces" onclick="showProvinces()">省份</span><span id="citys"
                                                                                                     onclick="showCitys()">城市</span><span
                                        id="areas" onclick="showAreas()">县区</span>
                                    <div class="provinces hide"
                                         style="left: -1px;border: 0px solid #a7baf5;height: auto; width:300px;">
                                        <dl>
                                            <dt>直辖市</dt>
                                            <dd class="provinceCharteredCities">
                                            </dd>
                                        </dl>
                                        <dl style="padding-top: 10px;padding-bottom: 10px;">
                                            <dt>A-H</dt>
                                            <dd class="provinceAH">
                                            </dd>
                                        </dl>
                                        <dl style="padding-top: 10px;padding-bottom: 10px;">
                                            <dt>J-Z</dt>
                                            <dd class="provinceJZ">
                                            </dd>
                                        </dl>
                                        <dl style="padding-top: 10px;padding-bottom: 10px;">
                                            <dt>自治区</dt>
                                            <dd class="provinceAutonomy">
                                            </dd>
                                        </dl>
                                        <dl style="padding-top: 10px;padding-bottom: 10px;">
                                            <dt>港澳台</dt>
                                            <dd class="provinceGAT">
                                            </dd>
                                        </dl>
                                    </div>
                                    <div class="citys hide"
                                         style="padding-top: 10px;padding-bottom: 10px;left: -1px;border: 0px solid #a7baf5;height: auto; width:300px;">

                                    </div>
                                    <div class="areas hide"
                                         style="padding-top: 10px;padding-bottom: 10px;left: -1px;border: 0px solid #a7baf5;height:auto; width:300px;">

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="height: 18px;">
                            <div class="districtError form-validates">
                                <i class="error hide"></i>
                                <i class="hint"></i>
                                <span id="districtError">请选择省市区</span>
                            </div>
                        </div>
                        <div>
                            <div style="width: 350px;text-align: right;margin-bottom: -28px;">
                                <label th:text="#{addressHtml.postalcode}">邮政编码</label>
                            </div>
                            <input value="" name="postalcode" id="consigneePostalcode" type="text"
                                   class="btnText margin-right" style="width:200px;"/>
                        </div>
                        <div style="height: 18px;">
                            <div class="postalcodeError form-validates">
                                <i class="error hide"></i>
                                <i class="hint"></i>
                                <span id="postalcodeError">如不清楚邮编，请填写000000</span>
                            </div>
                        </div>
                        <div style="margin-top: -7px;">
                            <div style="height: 90px; width: 350px;text-align: right;margin-bottom: -28px;">
                                <label th:text="#{addressHtml.addresses}">详细地址</label>
                            </div>
                                <textarea name="address" class="detailed_address margin-right" id="address"
                                          style="display: block;width:300px; height: 70px;z-index: 1;"></textarea>
                        </div>
                        <div style="height: 18px;position: relative;top: -60px;">
                            <div style="width: 340px; height: 18px" class="addressError form-validates">
                                <i class="error hide"></i>
                                <i class="hint"></i>
                                <span style="display: inline-block;height: 18px"
                                      id="addressError">5-120个字符，一个汉字为两个字符</span>
                            </div>
                        </div>
                        <div id="delFlag" style="margin-top: -30px">
                            <div style="margin-right: 40px;position: relative; top: -50px">
                                <input style="zoom: 130%;position: relative; top: 3px" type="checkbox" name="delFlag"/><span
                                    th:text="#{addressHtml.addDefault}">设为默认收货地址</span>
                            </div>
                        </div>
                        <div style="margin-top: -40px">
                            <button onclick="commitFn()" class="button" style="width:210px"
                                    th:text="#{addressHtml.add}">保存
                            </button>
                        </div>

                    </div>

                </form>
            </div>
            <div class="tbl-deliver-address">
                <div class="caption mtb10" style="height:40px;width:  500px">已保存了<span id="amount"
                                                                                       th:text="${listAddressSize}"></span>条地址
                </div>
                <table rules="rows" border="0" cellspacing="0" cellpadding="0" style="width: 96%;" class="tbl-main">


                    <tr class="thead-tbl-grade">
                        <th style="width: 40px;text-align: center" th:text="#{addressHtml.index}">序号</th>
                        <th style="width: 70px" th:text="#{addressHtml.consignee}">收货人</th>
                        <th style="width: 136px" th:text="#{addressHtml.district}">所在地区</th>
                        <th style="width: 138px" th:text="#{addressHtml.addresses}">详细地址</th>
                        <th style="width: 68px" th:text="#{addressHtml.postalcode}">邮编</th>
                        <th style="width: 90px" th:text="#{addressHtml.telPhone}">手机号码</th>
                        <th style="width: 70px" th:text="#{addressHtml.handle}">操作</th>
                        <th style="width: 70px"></th>
                    </tr>
                </table>

                <div class="tbl-deliver-main" style="padding: 0px;margin-right: 0px;border: 0px">
                    <table rules="rows" border="0" cellspacing="0" cellpadding="0" id="tbl-main" class="tbl-main"
                           style="margin: 0px;">

                        <tr th:each="address,addressStat:${listAddress}" th:id="${address.addressid}"
                            th:onmouseover="|backGroundColor1(this,${addressStat.index})|"
                            th:onmouseout="|backGroundColor2(this,${addressStat.index})|"
                            class="thead-tbl-address address-default ">
                            <div hidden="hidden">
                                <input id="addressid" th:value="${address.addressid}" hidden="hidden"/>
                                <input id="userid" th:value="${address.operaid}" hidden="hidden"/>
                            </div>
                            <td style="width: 40px;text-align: center" th:text="${addressStat.index+1}"></td>
                            <td style="width: 68px" th:text="${address.consignee}"></td>
                            <td style="width: 136px" th:text="${address.district}"></td>
                            <td style="width: 136px" th:text="${address.address}"></td>
                            <td style="width: 68px" th:text="${address.postalcode}"></td>
                            <td style="width: 87px" th:text="${address.telPhone}"></td>
                            <td style="width: 68px">
                                <a href="#J_DeliverTitle" th:id="${address.addressid}" onclick="updateAddress(this)" class="operationAddress"
                                   th:text="#{addressHtml.update}">修改</a>|
                                <a th:id="${address.addressid}" onclick="deleteAddress(this)"
                                   class="del operationAddress" th:text="#{addressHtml.delete}">删除</a>
                            </td>
                            <td style="width: 60px" class="thead-tbl-status">
                                <span class="note" th:if="${address.delFlag eq '1'}" th:text="#{addressHtml.Default}">默认地址</span>
                                <a th:id="${addressStat.index}" class="implicit hide smallHand"
                                   th:unless="${address.delFlag eq '1'}" th:name="${address.addressid}"
                                   onclick="delFlagAddress(this)" th:text="#{addressHtml.addDef}">设为默认</a>
                            </td>
                        </tr>


                    </table>
                </div>
            </div>

        </div>
    </div>
</div>
</body>
</html>